<script setup lang="ts">
import { Picture } from '@element-plus/icons'

const ttiStore = useTti()

ttiStore.loading = false
</script>
<template>
  <div class="text-2xl font-bold pl-3 pb-2">
    文生图功能
  </div>
  <div class="xl:flex justify-center h-fit">
    <!-- 表单 -->
    <TtiForm class="flex-1 xl:ml-3 xl:order-last my-2 xl:my-0" />
    <!-- 图片容器 -->
    <div v-loading="ttiStore.loading" class="xl:w-8/12 aspect-video p-2 rounded-lg flex items-center justify-center bg-white flex-shrink-0 border mx-auto relative">
      <div
        class="bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center"
        :class="[ttiStore.imageSrc ? 'w-fit' : 'w-full aspect-video']"
      >
        <img v-if="ttiStore.imageSrc" class="max-w-full max-h-full" :src="ttiStore.imageSrc" :alt="ttiStore.imageAlt">
        <el-icon v-else class="text-9xl text-gray-400">
          <Picture />
        </el-icon>
      </div>
    </div>
  </div>
</template>
